<script setup lang="ts">
import { type PropType, ref, computed } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";
import { Title } from "@meta2d/core/src/title";

const props = defineProps({
    data: {
        type: Object,
        default: () => []
    },
    color: {
        type: String,
        default: () => []
    }
});

const { isDark } = useDark();
const theme = computed(() => (isDark.value ? "dark" : "light"));
const chartRef = ref();
const { setOptions } = useECharts(chartRef, {
    theme,
    renderer: "svg"
});

watch(() => props.data, () => {
    setOptions({
        container: ".pie-card",
        tooltip: {
            trigger: 'item',
        },
    
        legend: {
            orient: props.data.orient,
            bottom: props.data.bottom,
            right: props.data.right,
            top: props.data.top,
            icon: "circle",
            itemWidth: 8,
            itemHeight: 8,
            textStyle: {
                fontSize: "0.875rem",
                 fontWeight:400,
                 fontFamily:'PingFang SC',
                // color:'#D6D6D6'
            },

        },
        series:
            [
                {
                    data: props.data.data,
                    // name: '测试',
                    type: "pie",
                    top: props.data?.series?.top,
                    left: props.data?.series?.left,
                    radius: props.data?.series?.radius,
                    center: props.data?.series?.center,
                    // color: ['#07C7E0','#5978E1'],
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: { // 高亮状态下的图形样式
                        label: {
                            show: true,
                            fontSize: '0.875rem',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                 
                },
            ]

    })
},
)

</script>
<template>
    <div ref="chartRef" style="width: 100%;" :style="{ height: props.data.height }" />
</template>
